<template>
<div class>
  <head title="Delivery address">
    <div slot="right" class="rightBox" @click="add">
      <text class="addIcon">&#xe601;</text>
    </div>
  </head>
  <div class="wrapper">
    <empty v-if="addressList.length==0" tips="Your Address is empty"></empty>
    <list
      class="contentList"
      v-if="addressList.length>0"
      @loadmore="onloadmore"
      loadmoreoffset="200"
      :show-scrollbar="false"
    >
      <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'"></refresh>
      <cell>
        <div
          class="listrow"
          v-for="(row,index) in addressList"
          :key="index"
          @click="select(row)"
          bubble="true"
        >
          <div class="left">
            <text class="head">{{row.name[0]}}</text>
          </div>
          <div class="listCenter">
            <div class="name-tel">
              <text class="name">{{row.name}}</text>
              <text class="tel">{{row.phone}}</text>
            </div>
            <div class="defaulAdd">
              <div class="addressLde">
                <text class="default" v-if="row.is_default=='2'">default</text>
                <text
                  class="address"
                >{{row.address}} ,{{row.area}}, {{row.city}} ,{{row.province}} {{row.postal_code}}</text>
              </div>

              <div class="right" @click="edit(row)">
                <text class="bianji">edit</text>
              </div>
            </div>
          </div>
        </div>
      </cell>
    </list>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>
<script>
const navigator = weex.requireModule("navigator");
import asCore from "../../../mixin/core";
import { get_address_list } from "../../../mixin/ajax";
const updateAddress = new BroadcastChannel("updateAddress");
export default {
  data() {
    return {
      refreshing: false,
      isSelect: false,
      userId: "",
      page: 1,
      addressList: []
    };
  },
  created() {
    updateAddress.onmessage = this.updateAddress;
    // this.loadData();
  },
  methods: {
    onLoad(parmars) {
      if (parmars && parmars.param) {
        return false;
      }
      if (parmars && parmars.type) {
        this.type = parmars.type;
      }
      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getList();
      });
    },
    onrefresh(event) {
      let that = this;
      that.page = 1;
      that.refreshing = true;
      that.getList();
      setTimeout(() => {
        that.refreshing = false;
      }, 1000);
    },
    updateAddress() {
      this.page = 1;
      this.getList();
    },
    onloadmore() {
      if (this.hasMore) {
        this.page++;
        this.getList();
      }
    },
    getList() {
      this.isLoading = true;
      let that = this;
      get_address_list(
        {
          users_id: this.userId,
          page: this.page,
          page_num: 10
        },
        (res, flag) => {
          this.isLoading = false;
          this.log(res);
          if (flag) {
            if (res.code == 200) {
              if (this.page == 1) {
                that.addressList = res.data.list;
              } else {
                that.addressList = that.addressList.concat(res.data.list);
              }
              if (res.data.list.length == 0 || res.data.list.length < 10) {
                that.hasMore = false;
              }
              asCore.setAddressList(this.addressList);
            }
          }
        }
      );
    },
    edit(row) {
      this.push("root:app/user/address/edit.js", { id: row.id });
    },
    add() {
      this.push("root:app/user/address/edit.js");
    },
    select(row) {
      if (this.type == "shop") {
        const selectAddress = new BroadcastChannel("selectAddress");
        selectAddress.postMessage(row);
        this.back();
      } else if (this.type == "post") {
        const postAddress = new BroadcastChannel("postAddress");
        postAddress.postMessage(row);
        this.back();
      } else if (this.type == "prize") {
        const prizeAddress = new BroadcastChannel("prizeAddress");
        prizeAddress.postMessage(row);
        this.back();
      } else {
        this.edit(row);
      }
    }
  }
};
</script>

<style scoped lang="less">
.rightBox {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex: 1;

  &:active {
    background-color: #222;
  }
}
.wrapper {
  width: 750px;
  background-color: #f5f5f5;
  flex: 1;
}

.contentList {
  width: 750px;
}

.addIcon {
  font-size: 40px;
  color: #ffffff;
  font-family: iconfont;
}

.icon {
  height: 80px;
  color: #fff;
  font-size: 30px;
  justify-content: center;
  align-items: center;
}

.listrow {
  margin-bottom: 20px;
  width: 750px;
  padding: 32px;
  /* height: 240px; */
  flex-direction: row;
  align-items: flex-start;
  background-color: #ffffff;
}

.left {
  width: 90px;
  flex-direction: c;
}

.head {
  width: 45px;
  height: 45px;
  background-color: #ebdec8;
  color: #333333;
  line-height: 45px;
  text-align: center;
  border-radius: 45px;
  font-size: 28px;
}

.listCenter {
  flex: 1;
}

.name-tel {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.name {
  font-size: 28px;
  color: #666666;
}

.tel {
  margin-left: 28px;
  font-size: 24px;
  color: #999;
}

.defaulAdd {
  flex-direction: row;
  flex: 1;
  padding-top: 5px;
}
.addressLde {
  padding: 10px;
  flex: 1;
}

.default {
  font-size: 20px;
  background-color: #fcf3e9;
  color: #ed6a38;
  height: 40px;
  line-height: 40px;
  width: 120px;
  padding: 0 10px;
  text-align: center;
  margin-right: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.address {
  flex: 1;
  font-size: 24px;
  line-height: 33px;
  color: #666666;
  lines: 4;
  text-overflow: ellipsis;
}

.right {
  width: 90px;
  padding: 20px 0 30px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.bianji {
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #999999;
}
</style>
